import React, { useState } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'

import { Breadcrumb, Divider, Button, Cascader } from 'rsuite'

import Header from 'components/Header'
import Tree from 'components/Tree'

import Editor from './Editor'
import Files from './Files'
import Chart from './Chart'
import Render from './Render'
import Worker from './Worker'
import OverlayerText from './OverlayerText'

import data from './tree.json'

import './index.less'

const cascaderData = [
  {
    value: '1',
    label: '分支',
    children: [
      {
        label: 'master',
        value: 'master'
      },
      {
        label: 'develop',
        value: 'develop'
      },
      {
        label: 'hotfix',
        value: 'hotfix'
      },
      {
        label: 'gh-pages',
        value: 'gh-pages'
      }
    ]
  },
  {
    value: '1',
    label: '提交',
    children: [
      {
        label: '523far56 fix: throw a unexpected error',
        value: '523far56'
      },
      {
        label: '324adasq: feat: add a component',
        value: '324adasq'
      }
    ]
  }
]

function renderCascaderMenuItem() {}

function MainBoard(props) {
  function onSelectTreeNode({ cate, label }) {
    if (label === 'render') {
      props.history.push(`/mainboard/render`)
      return
    }

    props.history.push(`/mainboard/${cate}/${label}`)
  }

  return pug`
    #MainBoard.box.box-row
      .head
        Header
      .breadcrumb
        // Breadcrumb
        //   Breadcrumb.Item
        //     Cascader(data=cascaderData size="xs" renderMenuItem=renderCascaderMenuItem)
        //   Breadcrumb.Item Components
        //   Breadcrumb.Item(active=true) Breadcrumb
      Divider
      .main.box.box-row-flex
        .subbar
          Tree(
            data=data
            onSelect=onSelectTreeNode
          )
        .content.box-col-flex
          Route(path="/mainboard/dir/:dirname" component=Files)
          Route(path="/mainboard/file/:filename" component=Editor)
          Route(path="/mainboard/chart" component=Chart)
          Route(path="/mainboard/render" component=Render)
          Route(path="/mainboard/worker" component=Worker)
          Route(path="/mainboard/text" component=OverlayerText)
          // Route
          //   Redirect(to="/mainboard/dir/root")
  `
}

export default MainBoard
